<template>
  <div class="ranking">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="排行榜" />
    <div class="header">
      <image class="img" :src="imgUrl" mode="widthFix" />
    </div>
    <div class="content">
      <template v-if="dataList.length == 0">
      <div class="none">
        <image class="none-img" :src="imgBaseUrl + 'none.png'" mode="widthFix" />
      </div>
    </template>
      <div class="item" :id="item.id" v-for="(item, index) in dataList" :key="index">
        <div class="avatar">
          <image class="avatar-img" :src="item.avatar" mode="widthFix" />
        </div>
        <div class="between-box">
          <div class="info">
            <div class="name">{{item.reply_realname}}</div>
            <div class="company">{{item.affiliated_company}}</div>
          </div>
          <div class="number">{{item.count_score}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      baseUrl: this.$store.state.imgBaseUrl,
      imgUrl: "",
      dataList: [],
      imgBaseUrl: this.$store.state.imgBaseUrl,
    };
  },
  methods: {
    login(msg) {
      uni.showModal({
        title: "提示",
        content: msg,
        success: function(res) {
          if (res.confirm) {
            uni.switchTab({
              url: "/pages/my/my"
            });
          } else if (res.cancel) {
            uni.navigateBack({
              delta: 1
            });
          }
        }
      });
    }
  },
  async onLoad(e) {
    let that = this;
    this.id = e.id; // 0 好评
    this.imgUrl = e.id == 0 ? this.baseUrl + "phb_banner@2x.png" : this.baseUrl + "phb_banner_a@2x.png";
    let op = e.id == 0 ? "getPraise" : "getSpeed";
    let res = await this.$gh
      .request("member.ranking", {
        data: {
          op,
          psize: 20
        }
      })
      .catch(err => {
        if (err.code == 41009) {
          that.$store.dispatch('login', err.message)
        }
      });
      if(res){
        this.dataList = res.data.list;
      }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.ranking {
  position: relative;
  min-height: 100vh;
  background-color: #fff;
  .header {
    .img {
      height: 427rpx;
    }
  }
  .content {
    position: absolute;
    top: 500rpx;
    left: 0;
    width: 750rpx;
    min-height: 200rpx;
    border-top-left-radius: 45rpx;
    border-top-right-radius: 45rpx;
    padding: 0rpx 25rpx 30rpx;
    background-color: #fff;
    box-sizing: border-box;
    .item {
      padding-top: 30rpx;
      .flex();
      align-items: flex-start;
      .avatar {
        .avatar-img {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
      }

      .between-box {
        flex: 1;
        .gh-between();
        padding-bottom: 35rpx;
        border-bottom: 1px solid #eee;
        .info {
          .name {
            font-size: 36rpx;
            color: @deep-color;
            margin-bottom: 5rpx;
          }

          .company {
            font-size: 28rpx;
            color: @font-color;
          }
        }

        .number {
          font-size: 30rpx;
          color: @font-color;
        }
      }
    }
  }
  .none {
    font-size: 30rpx;
    color: @font-color;
    text-align: center;
    .none-img{
      width: 50%;
      margin-top: 100rpx;
    }
  }
}
</style>